<template>
  <div class="login_container">
    <div class="login_wrapper">
      <!-- <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple-dark"></div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-dark login_box">
            <div>欢迎登录 - MMALL管理系统</div>
            <div class="login_input">
              <el-input v-model="userMessage.username" placeholder="User Name"></el-input>
            </div>
            <div class="login_input">
              <el-input v-model="userMessage.password" placeholder="Password" show-password></el-input>
            </div>
            <div>
              <el-button class="login_button" @click="UserLogin()">登录</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-dark"></div>
        </el-col>
      </el-row>-->

      <div class="grid-content bg-purple-dark login_box">
        <div class="login_title">欢迎登录 - MMALL管理系统</div>
        <div class="login_input">
          <el-input v-model="userMessage.username" placeholder="User Name"></el-input>
        </div>
        <div class="login_input">
          <el-input v-model="userMessage.password" placeholder="Password" show-password></el-input>
        </div>
        <div>
          <el-button class="login_button" @click="UserLogin()">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "@/assets/request/http.js";

export default {
  data() {
    return {
      userMessage: {
        username: "admin",
        password: "admin",
      },
    };
  },
  methods: {
    UserLogin() {
      //   if (this.userMessage.username == "" || this.userMessage.password == "") {
      //     alert("用户名或密码不能为空");
      //   } else if (
      //     this.userMessage.username == "admin" ||
      //     this.userMessage.password == "admin"
      //   ) {
      //     localStorage.setItem("login", true);
      //     this.$router.push("/");
      //   } else {
      //     alert("密码错误");
      //   }

      login(this.userMessage).then((data) => {
        console.log(data);
        if (data.data.status == 0) {
          localStorage.setItem("admin", this.userMessage.username);
          this.$router.push("/");
          this.$message(data.data.msg);
        } else {
          this.$message(data.data.msg);
        }
      });
    },
  },
  mounted() {
    //   window.addEventListener('keydown',this.UserLogin)
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/Scss/index.scss";

.login_container {
  width: 100%;
  height: 734px;
  background-image: url("../assets/image/360wallpaper.jpg");
  position: absolute;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #fff;
}
.bg-purple {
  background: #fff;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  //   border-radius: 4px;
  //   min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.login_wrapper {
  // margin-top: 200px;
  //   margin-top: 40%;
  //   margin-left: 50%;
  //   transform: translate(-50%, -50%);
}
.login_box {
  width: 30%;
  height: 240px;
  padding: 20px;
  border: 1px solid black;
  background-color: rgba(255, 255, 255, 0.4);
  top: 50%;
  left: 50%;
  transform: translate(-50%, 60%);
  position: relative;
}
.login_input {
  margin-top: 15px;
}
.login_button {
  width: 100%;
  margin-top: 15px;
  color: #fff;
  background-color: skyblue;
}
.login_title {
  color: skyblue;
}
</style>